<template>
	<view v-if="pageShow" class="container">
		<scroll-view class="scroll" :scroll-y="true">
			<view class="swiper-area">
				<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
					@change="onSwiperChange">
					<swiper-item v-for="(item, index) in banners" :key="index" class="swiper-item"
						@click="viewImg(item)">
						<image class="swiper-img" :src="item" mode="aspectFill">
						</image>
					</swiper-item>
				</swiper>
			</view>
			<view class="header">
				<view class="header-title">
					<text class="title">{{shopInfo.name}}</text>
					<text class="price">{{shopInfo.price == 0?'面议':'¥' + shopInfo.price}}</text>
				</view>
				<view class="header-collect" @click="collectShop">
					<image
						:src="isCollect === 0?'https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/shopImg/collect_icon.png':'https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/shopImg/collect_select.png'">
					</image>
					<text>收藏</text>
				</view>
			</view>
			<view class="service-info">
				<view class="service" @click="goServiceDetail">
					<view class="logo">
						<image :src="serviceInfo.logo" mode="aspectFill"></image>
					</view>
					<view class="describe">
						<text class="title">{{serviceInfo.name}}</text>
						<text class="goods">擅长服务：{{goodService}}</text>
					</view>
				</view>
			</view>
			<view class="service-detail">
				<view
					v-if="shopInfo.service_time || shopInfo.preparation || shopInfo.service_process || shopInfo.service_content"
					class="title solid-bottom">
					服务详情
				</view>
				<view class="service-content">
					<view v-if="shopInfo.service_time" class="content">
						<view class="icon"></view>
						<view class="content-item">
							<text class="content-title">服务时间</text>
							<text class="detail">{{shopInfo.service_time}}</text>
						</view>
					</view>
					<view v-if="shopInfo.preparation" class="content">
						<view class="icon"></view>
						<view class="content-item">
							<text class="content-title">准备资料</text>
							<text class="detail">{{shopInfo.preparation}}</text>
						</view>
					</view>
					<view v-if="shopInfo.service_process" class="content">
						<view class="icon"></view>
						<view class="content-item">
							<text class="content-title">服务流程</text>
							<text class="detail">{{shopInfo.service_process}}</text>
						</view>
					</view>
					<view v-if="shopInfo.service_content" class="content">
						<view class="icon"></view>
						<view class="content-item">
							<text class="content-title">服务内容</text>
							<text class="detail">{{shopInfo.service_content}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom-btn">
			<view class="btn-ask" @click.stop="nowAsk">
				立即咨询
			</view>
			<view class="btn-buy" @click.stop="nowBuy">
				立即购买
			</view>
		</view>
		<!-- 底部固定按钮-->
		<view class="fixed-btn" v-if="loginBtn">
			<view class="bottom-btn">
				<view class="btn-text">
					<text>
						登录查看更多优质内容
					</text>
					<text>
						新用户登录即享好礼~
					</text>
				</view>
				<view class="btn" @click="goWxLogin">
					马上登录
				</view>
			</view>
		</view>
		<!-- 底部固定按钮 end-->
	</view>
</template>

<script>
	import shopDetailApi from "@/api/shopDetail.js"
	import personalApi from '@/api/personal.js'
	export default {
		data() {
			return {
				shopId: '',
				//商品详情
				shopObj: {},
				banners: [],
				shopInfo: {},
				serviceInfo: {},
				swiperIndex: 0,
				isCollect: null,

				//服务商详情
				serviceObj: {},
				goodService: '',

				pageShow: false,
				
				inviteCode: '',
				loginBtn: true
			}
		},
		onLoad(e) {
			this.shopId = e.id
			this.inviteCode = uni.getStorageSync('userInfo').invite_code
			console.log('获取自己的邀请码', this.inviteCode)
			if(e.invite_code) {
				uni.setStorageSync('inviteCode', e.invite_code)
				console.log('我已经保存了inviteCode', e.invite_code)
			}
			this.getDetail()
		},
		onShow() {
			if(uni.getStorageSync('token')) {
				this.loginBtn = false
			}else {
				this.loginBtn = true
			}
		},
		methods: {
			async getWeChatClick() {
				const pages = getCurrentPages()
				let currentRoute  = pages[pages.length - 1].route
				let obj = {
					type: 3,
					m_id: 9,
					describe: this.shopInfo.name,
					url: currentRoute,
					code: 'WH1'
				}
				let res = await personalApi.getWechatClick(obj)
			},
			
			//分享微信好友
			onShareAppMessage() {
				return {
					title: this.shopInfo.name,
					path: '/pagesShop/shopDetail/shopDetail?invite_code=' + this.inviteCode + "&id=" + this.shopId + "&pathType=1"
				}
			},
			
			//分享微信朋友圈
			onShareTimeline() {
				return {
					title: this.shopInfo.name,
					query: 'id=' + this.shopId + "&invite_code=" + this.inviteCode + "&pathType=1"
				}
			},
			
			//去往登录页
			goWxLogin() {
				uni.redirectTo({
					url: "/pagesLogin/wxLogin/wxLogin?id=" + this.shopId + "&pathType=1"
				})
			},
			
			//获取服务商品详情
			async getDetail() {
				let res = await shopDetailApi.getShopDetail({
					id: this.shopId
				})
				if (res.code === 1) {
					this.shopObj = res.data
					this.shopInfo = res.data.info
					this.isCollect = res.data.is_collect
					this.serviceInfo = res.data.service_info
					this.getWeChatClick()
					this.banners = res.data.info.pic.split(',')
					this.getServiceInfo(res.data.service_info.id)
					this.pageShow = true
				} else {
					this.$common.msgShow(res.msg)
				}
			},
			//获取服务商详情
			async getServiceInfo(val) {
				let res = await shopDetailApi.getServiceDetail({
					id: val
				})
				if (res.code === 1) {
					this.serviceObj = res.data
					let arr = []
					res.data.good_services.forEach(val => {
						arr.push(val.name)
					})
					this.goodService = arr.join('、')
				} else {
					this.$common.msgShow(res.msg)
				}
			},

			//收藏、取消收藏商品
			async collectShop() {
				if (!uni.getStorageSync('token')) {
					this.$common.handleToken()
					return
				}
				let obj = {
					id: this.shopId,
					type: 13
				}
				let res = await shopDetailApi.addCollect(obj)
				if (res.code === 1) {
					if (res.code === 1) {
						this.isCollect = 1 - this.isCollect
						if (this.isCollect === 1) {
							this.$common.msgShow('收藏成功')
						} else {
							this.$common.msgShow('取消收藏')
						}
					}
				}
			},

			//前往服务商详情
			goServiceDetail() {
				uni.navigateTo({
					url: '/pagesShop/serviceDetail/serviceDetail?id=' + this.serviceInfo.id
				})
			},

			//轮播图事件
			onSwiperChange(e) {
				this.swiperIndex = e.detail.current
			},

			//banner图预览
			viewImg(item) {
				uni.previewImage({
					urls: [item]
				})
			},

			//立即咨询
			nowAsk() {
				if (!uni.getStorageSync('token')) {
					this.$common.handleToken()
					return
				}
				uni.setStorageSync("to_zim_userid", this.serviceInfo.user_id);
				uni.navigateTo({
					url: '/pages/message/chat?id=' + this.serviceInfo.user_id
				})
			},

			//立即购买
			async nowBuy() {
				if (!uni.getStorageSync('token')) {
					this.$common.handleToken()
					return
				}
				let obj = {
					shop_id: this.shopId
				}
				const res = await shopDetailApi.buyShop(obj)
				if (res.code === 1) {
					uni.navigateTo({
						url: '/pagesOrder/payOrder/payOrder?orderNo=' + res.data
					})
				} else {
					this.$common.msgShow(res.msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "shopDetail.scss";
</style>